<template>
	<div class="home">
		<router-view></router-view>
		<div class="bottom_div">
			<div class="tab_div" v-for="(item,index) in tabList" @click="change(index)">
				<router-link :to="item.to">
					<img :src="index==selected?item.activeUrl:item.url" />
					<p :class="{color_active:index==selected}">{{item.text}}</p>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						url: require("../assets/tab_home.png"),
						activeUrl: require("../assets/tab_home_active.png"),
						text: "首页",
						to: "/home"
					}, {
						url: require("../assets/tab_shopcart.png"),
						activeUrl: require("../assets/tab_shopcart_active.png"),
						text: "购物车",
						to: "/home/shopcart"
					},
					{
						url: require("../assets/tab_orders.png"),
						activeUrl: require("../assets/tab_orders_active.png"),
						text: "订单",
						to: "/home/order"
					},
					{
						url: require("../assets/tab_mine.png"),
						activeUrl: require("../assets/tab_mine_active.png"),
						text: "我的",
						to: "/home/mine"
					}
				],
				selected: 0
			}
		},
		methods: {
			change: function(index) {
				this.selected = index;
			}
		},
	}
</script>
<style>
	.bottom_div {
		background: #f1f1f1;
		height: 49px;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
	}

	.bottom_div .tab_div {
		text-align: center;
		flex: 1
	}

	.tab_div img {
		height: 20px;
		width: 20px;
	}

	.tab_div p {
		font-size: 10px;
		color: #333333;
	}

	.tab_div .color_active {
		color: #1FA4FC;
	}
</style>
